<template>
  <div class="common-view-box">
    <el-radio-group
      v-model="selectData.radioType"
    >
      <!--每-->
      <el-row>
        <el-radio label="1">
          {{ cptConfig.cptText.every }}
        </el-radio>
      </el-row>
      <!--不指定-->
      <el-row>
        <el-radio label="0">
          {{ cptConfig.cptText.doNotSpecify }}
        </el-radio>
      </el-row>
      <!--间隔-->
      <el-row>
        <!--年-->
        <el-radio
          v-if="viewType === 'year'"
          label="2"
        >
          {{ cptConfig.cptText.interval[0] }}
          <el-input-number
            v-model="selectData.incrementIncrement"
            size="small"
          />
          {{ cptConfig.cptText.interval[1] || '' }}
          <el-input-number
            v-model="selectData.incrementStart"
            size="small"
          />
          {{ cptConfig.cptText.interval[2]||'' }}
        </el-radio>
        <!--非年-->
        <el-radio
          v-if="viewType !== 'year'"
          label="2"
        >
          {{ cptConfig.cptText.interval[0] }}
          <el-input-number
            v-model="selectData.incrementIncrement"
            size="small"
            :min="cptConfig.cptNum.interval[0]"
            :max="cptConfig.cptNum.interval[1]"
          />
          {{ cptConfig.cptText.interval[1] || '' }}
          <el-input-number
            v-model="selectData.incrementStart"
            size="small"
            :min="cptConfig.cptNum.intervalStart[0]"
            :max="cptConfig.cptNum.intervalStart[1]"
          />
          {{ cptConfig.cptText.interval[2]||'' }}
        </el-radio>
      </el-row>
      <el-row v-if="viewType !== 'year'">
        <el-radio
          class="long"
          label="3"
        >
          {{ cptConfig.cptText.specific }}
          <el-select
            v-if="viewType === 'month'"
            v-model="selectData.specificSpecific"
            size="small"
            multiple
            @change="specificSpecificSort"
            @visible-change="optionShow"
          >
            <el-option
              v-for="val in cptConfig.cptNum.specific"
              :key="val"
              :value="val"
            >
              {{ val }}
            </el-option>
          </el-select>
          <el-select
            v-if="viewType !== 'month'"
            v-model="selectData.specificSpecific"
            size="small"
            multiple
            @change="specificSpecificSort"
            @visible-change="optionShow"
          >
            <el-option
              v-for="val in cptConfig.cptNum.specific"
              :key="val"
              :value="val-1"
            >
              {{ val-1 }}
            </el-option>
          </el-select>
        </el-radio>
      </el-row>
      <el-row>
        <el-radio
          v-if="viewType === 'year'"
          label="4"
        >
          {{ cptConfig.cptText.cycle[0] }}
          <el-input-number
            v-if="viewType === 'year'"
            v-model="selectData.rangeStart"
            size="small"
          />
          {{ cptConfig.cptText.cycle[1]||'' }}
          <el-input-number
            v-if="viewType === 'year'"
            v-model="selectData.rangeEnd"
            size="small"
          />
          {{ cptConfig.cptText.cycle[2]||'' }}
        </el-radio>
        <el-radio
          v-if="viewType !== 'year'"
          label="4"
        >
          {{ cptConfig.cptText.cycle[0] }}
          <el-input-number
            v-if="viewType !== 'year'"
            v-model="selectData.rangeStart"
            size="small"
            :min="cptConfig.cptNum.cycleStart[0]"
            :max="cptConfig.cptNum.cycleStart[1]"
          />
          {{ cptConfig.cptText.cycle[1]||'' }}
          <el-input-number
            v-if="viewType !== 'year'"
            v-model="selectData.rangeEnd"
            size="small"
            :min="cptConfig.cptNum.cycleEnd[0]"
            :max="cptConfig.cptNum.cycleEnd[1]"
          />
          {{ cptConfig.cptText.cycle[2]||'' }}
        </el-radio>
      </el-row>
    </el-radio-group>
  </div>
</template>

<script>
  import mixin from './mixins'
  export default {
    mixins: [mixin],
    props: {
      viewType:{
        type:String,
        default() {
          return "second" // second秒，minute分，hour时，year年
        }
      },
      // 设置回显的参数
      displayData: {
        type: String,
        default() {
          return ''
        }
      }
    },
    data() {
      return {
        // 选后的参数
        selectData: {
          radioType:'1', // 选择方式
          incrementStart:'3', //从多少开始
          incrementIncrement:'5', // 间隔
          rangeStart:'', // 从多少开始
          rangeEnd:'', // 到多少结束
          specificSpecific:[0], //具体指点
        },
        // 分秒
        mmss: {
          interval:[1,59],
          intervalStart:[0,59],
          specific: 60,
          cycleStart:[1,58],
          cycleEnd:[2,59],
        },
        // 时
        HH: {
          interval:[0,23],
          intervalStart:[0,23],
          specific: 24,
          cycleStart:[0,22],
          cycleEnd:[1,23],
        },
        // 月
        dd: {
          interval:[1,12],
          intervalStart:[1,12],
          specific: 12,
          cycleStart:[1,12],
          cycleEnd:[2,12],
        },
        //秒的文字
        secondText: {
          every: "每一秒钟",
          doNotSpecify: "不指定",
          interval: ["每隔", "秒执行 从", "秒开始"],
          specific: "具体秒数(可多选)",
          cycle: ["周期从", "到", "秒"]
        },
        //分的文字
        minuteText: {
          every: "每一分钟",
          doNotSpecify: "不指定",
          interval: ["每隔", "分执行 从", "分开始"],
          specific: "具体分钟数(可多选)",
          cycle: ["周期从", "到", "分"]
        },
        //时的文字
        hourText: {
          every: "每一小时",
          doNotSpecify: "不指定",
          interval: ["每隔", "小时执行 从", "小时开始"],
          specific: "具体小时数(可多选)",
          cycle: ["周期从", "到", "小时"]
        },
        //月的文字
        monthText: {
          every: "每一月",
          doNotSpecify: "不指定",
          interval: ["每隔", "月执行 从", "月开始"],
          specific: "具体月数(可多选)",
          cycle: ["从", "到", "月之间的每个月"]
        },
        //年的文字
        yearText: {
          every: "每一年",
          doNotSpecify: "不指定",
          interval: ["每隔", "年执行 从", "年开始"],
          specific: "具体年份(可多选)",
          cycle: ["从", "到", "年之间的每一年"]
        },
      }
    },
    computed: {
      cptConfig() {
        let obj = {
          cptNum:{},
          cptText:{}
        }
        if(this.viewType === "second") {
          obj.cptNum = this.mmss
          obj.cptText = this.secondText
        }
        if(this.viewType === "minute") {
          obj.cptNum = this.mmss
          obj.cptText = this.minuteText
        }
        if(this.viewType === "hour") {
          obj.cptNum = this.HH
          obj.cptText = this.hourText
        }
        if(this.viewType === "month") {
          obj.cptNum = this.dd
          obj.cptText = this.monthText
        }
        if(this.viewType === "year") {
          obj.cptText = this.yearText
        }
        return obj
      },
      // 计算显示
      dataText() {
        let text = '';
        let type = this.selectData.radioType;
        switch (type.toString()){
          case '0':
            text = "?";
            break;
          case '1':
            text = '*';
            break;
          case '2':
            text = this.selectData.incrementStart+'/'+this.selectData.incrementIncrement;
            break;
          case '3':
            text = this.selectData.specificSpecific.join(",");
            break;
          case '4':
            text = this.selectData.rangeStart+'-'+this.selectData.rangeEnd;
            break;
          default:
            if(this.displayData) {
              text = this.displayData
            }

        }
        return text;
      },
    },
    watch: {
      displayData: {
        handler(){
          this.displayDataChange();
        },
        deep:true
      },
      dataText:{
        handler(newVal){
          this.$emit('change', newVal, this.viewType)
        },
        deep:true
      }
    },
    created() {
      this.displayDataChange();
      this.initSelectData();
    },
    methods: {
      displayDataChange() {
        let arr = [];
        if(this.displayData) {
          let d = this.displayData;
          if(d === "*") {
            this.selectData.radioType = '1';
          }else if(d === "?") {
            this.selectData.radioType = '0';
          }else if(d.indexOf('/') !== -1) {
            arr = this.displayData.split('/');
            this.selectData.incrementStart = arr[0]; //从多少开始
            this.selectData.incrementIncrement = arr[1]; // 间隔
            this.selectData.radioType = '2'
          }else if(this.checkNum(d)) {
            this.selectData.specificSpecific = [d];
            this.selectData.radioType = '3'
          }else if(d.indexOf(',') !== -1) {
            arr = this.displayData.split(',');
            for(let i = 0; i < arr.length; i++) {
              if(arr.indexOf(arr[i])!==arr.lastIndexOf(arr[i])){
                console.log(this.viewType + "回显参数错误")
                return
              }
            }
            this.selectData.specificSpecific = arr;
            this.selectData.radioType = '3'
          }else if(d.indexOf('-') !== -1) {
            arr = this.displayData.split('-');
            this.selectData.rangeStart = arr[0]; // 从多少开始
            this.selectData.rangeEnd = arr[1]; // 到多少结束
            this.selectData.radioType = '4'
          }else {
            this.selectData.radioType = 'null'
          }
        }
      },
      // 初始化话选择的数据
      initSelectData() {
        // 月
        if(this.viewType === "month") {
          this.selectData.specificSpecific = [1];
        }
        // 年
        if(this.viewType === "year") {
          this.selectData.incrementStart = '2020';
          this.selectData.rangeStart = '2019';
          this.selectData.rangeEnd = '2020';
        }
      },
      // 下拉框改变时
      specificSpecificSort() {
        this.selectData.specificSpecific.sort((a,b) => { return a-b; });
      },
      // 显示下拉框的options
      optionShow(boolean) {
        if(boolean) {
          this.selectData.radioType = "3";
        }
      },
    }
  }
</script>

<style scoped>
  .common-view-box .el-row {
    margin: 10px 0;
  }
  .common-view-box .el-row .long .el-select {
    width: 350px;
  }
  .common-view-box .el-row .el-input-number {
    width: 110px;
  }
</style>